<template>
  <div>
    <el-table :data="order" stripe style="width: 100%">
      <el-table-column prop="id" label="订单ID" width="180"> </el-table-column>
      <el-table-column prop="storeName" label="商家名称" width="180">
      </el-table-column>
      <el-table-column prop="masterName" label="负责人姓名" width="180">
      </el-table-column>
      <el-table-column prop="masterPhone" label="负责人电话" width="120">
      </el-table-column>
      <el-table-column prop="status" label="订单状态">
        <template #default="props">
          <el-tag v-if="props.row.status == 0" type="primary">
            {{ noDone }}
          </el-tag>
          <el-tag v-else-if="props.row.status == 4" type="danger">
            {{ out }}
          </el-tag>
          <el-tag v-else-if="props.row.status == 6" type="success">
            {{ done }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="订单价格" width="180">
      </el-table-column>
      <el-table-column prop="carCount" label="检测车辆数" width="180">
      </el-table-column>
      <el-table-column prop="createDate" label="下单时间"> </el-table-column>
      <el-table-column prop="serveName" label="商务负责人" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="xiangQing(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 订单详情 -->
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="78%"
      :before-close="handleClose"
      center
    >
      <el-descriptions :column="3" border style="margin-top: 10px">
        <el-descriptions-item>
          <template slot="label"> 订单ID </template>
          <el-input v-model="nowOrder.id"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 负责人姓名</template>
          <el-input v-model="nowOrder.masterName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 负责人电话</template>
          <el-input v-model="nowOrder.masterPhone"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 订单状态 </template>
          <el-tag v-if="nowOrder.status == 0" type="primary">
            {{ noDone }}
          </el-tag>
          <el-tag v-else-if="nowOrder.status == 4" type="danger">
            {{ out }}
          </el-tag>
          <el-tag v-else-if="nowOrder.status == 6" type="success">
            {{ done }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 订单价格 </template>
          <el-input v-model="nowOrder.price"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检测车辆数</template>
          <el-input v-model="nowOrder.carCount"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 下单时间</template>
          <el-input v-model="nowOrder.createDate"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 车辆详情</template>
          <el-input></el-input>
        </el-descriptions-item>
      </el-descriptions>

      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="refundMoney">退款</el-button>
      </span>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pageNum"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      order: [],
      done: "已安排",
      out: "已退款",
      noDone: "未支付",
      query: {
        pageNum: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      nowOrder: {},
    };
  },
  methods: {
    initOrder: async function () {
      let res = await this.$http.get("/order/getOrder", {
        params: {
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
        },
      });

      this.query.total = res.data.object.total;
      this.order = res.data.object.list;
    },
    handleSizeChange: function (pageSize) {
      this.query.pageSize = pageSize;
      this.initOrder();
      console.log(pageSize);
    },
    handleCurrentChange: function (pageNum) {
      this.query.pageNum = pageNum;
      this.initOrder();
    },
    xiangQing: function (order) {
      this.dialogVisible = true;
      console.log(order);
      this.nowOrder = order;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    refundMoney: function (done) {
      this.$confirm("此操作将退还费用给客户，是否继续？", "提示", {
        type: "warning",
      })
        .then((_) => {
          done((this.dialogVisible = false));
        })
        .catch((_) => {});
    },
  },

  mounted: function () {
    this.initOrder();
  },
};
</script>

<style>
.el-dialog--center .el-dialog__footer {
  text-align: left;
  margin-top: -40px;
  margin-left: 5px;
}
</style>
